<template>
    <el-select v-model="value" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
    </el-select>
    <el-button type="primary">主要按钮</el-button>
    <div :class="classObject">新的div</div>
    <p>
        <vxe-button type="text" status="success" content="成功颜色">成功颜色</vxe-button>
        <vxe-button @click="searchEvent">刷新</vxe-button>
    </p>
    <vxe-grid v-bind="gridOptions">
        <template #pager>
            <!--使用 pager 插槽-->
            <vxe-pager :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
                v-model:current-page="tablePage.currentPage" v-model:page-size="tablePage.pageSize" :total="tablePage.total"
                @page-change="handlePageChange">
            </vxe-pager>
        </template>
        <template #num1_header="{ column }">
            <span>
                <!-- :class="classObject" -->
                <i class="static"
                    :class="{ 'vxe-icon-success-circle-fill alert-message-icon': column.params == isDefaultId }"
                    :id="column.params"></i>
                <span :class="changeDefStyle(column.params)" @click="headerClickEvent(column.params)">{{ column.title
                }}</span>
            </span>
        </template>
    </vxe-grid>
</template>
<script>
import { VXETable } from 'vxe-table'
// VXETable.setup({});
export default {
    created() {
        this.findList()
        this.isDefaultId = 1;
    },
    data() {
        return {
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            value: '',
            // iconSuccessClass: {
            //   active: true,
            //   'text-danger': false
            // },
            isDefaultId: "",
            isActive: true,
            hasError: true,
            error: null,
            //vxe-table
            tablePage: {
                total: 0,
                currentPage: 1,
                pageSize: 10
            },
            border: true,
            height: 530,
            loading: false,
            columnConfig: {
                resizable: true
            },
            data: [],
            columns: [
                { type: 'seq', width: 60 },
                { type: 'checkbox', width: 50 },
                { field: 'name', title: 'Name' },
                { field: 'nickname', title: 'Nickname' },
                { field: 'role', title: 'Role' },
                { field: 'address', title: 'Address', showOverflow: true }
            ],
            gridOptions: {
                border: true,
                height: 530,
                loading: false,
                columnConfig: {
                    resizable: true
                },
                data: [],
                columns: [
                    { type: 'seq', width: 60 },
                    { type: 'checkbox', width: 50 },
                    { field: 'name', title: 'Name' },
                    {
                        field: 'nickname',
                        title: 'Nickname',
                        params: "0",
                        slots: {
                            // 使用插槽模板渲染
                            // default: 'num1_default',
                            header: 'num1_header',
                            // footer: 'num1_footer',
                            // filter: 'num1_filter',
                            // edit: 'num1_edit'
                        }
                    },
                    {
                        field: 'role',
                        title: 'Role',
                        params: "1",
                        slots: {
                            // 使用插槽模板渲染
                            // default: 'num1_default',
                            header: 'num1_header',
                            // footer: 'num1_footer',
                            // filter: 'num1_filter',
                            // edit: 'num1_edit'
                        }
                    },
                    {
                        field: 'address',
                        title: 'Address',
                        params: "2",
                        slots: {
                            // 使用插槽模板渲染
                            // default: 'num1_default',
                            header: 'num1_header',
                            // footer: 'num1_footer',
                            // filter: 'num1_filter',
                            // edit: 'num1_edit'
                        }, showOverflow: true
                    }
                ]
            }
        }
    },
    computed: {
        classObject() {
            console.log("来了老弟");
            return {
                'vxe-icon-success-circle-fill': true,
                'alert-message-icon': true
            }
        },

    },
    methods: {
        findList() {
            this.gridOptions.loading = true
            setTimeout(() => {
                this.gridOptions.loading = false
                this.tablePage.total = 10
                this.gridOptions.data = [
                    { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: '1', age: 28, address: 'Shenzhen' },
                    { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: '0', age: 22, address: 'Guangzhou' },
                    { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: '1', age: 32, address: 'Shanghai' },
                    { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: '0', age: 23, address: 'Shenzhen' },
                    { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: '0', age: 30, address: 'Shanghai' },
                    { id: 10006, name: 'Test6', nickname: 'T6', role: 'Develop', sex: '0', age: 27, address: 'Shanghai' },
                    { id: 10007, name: 'Test7', nickname: 'T7', role: 'Develop', sex: '1', age: 29, address: 'Shenzhen' },
                    { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: '0', age: 32, address: 'Shanghai' },
                    { id: 10009, name: 'Test9', nickname: 'T9', role: 'Develop', sex: '1', age: 30, address: 'Shenzhen' },
                    { id: 10010, name: 'Test10', nickname: 'T10', role: 'Develop', sex: '0', age: 34, address: 'Shanghai' },
                    { id: 10011, name: 'Test10', nickname: 'T10', role: 'Develop', sex: '0', age: 34, address: 'Shanghai' }
                ]
            }, 300)
        },
        searchEvent() {
            this.tablePage.currentPage = 1
            this.findList()
        },
        handlePageChange(currentPage, pageSize) {
            this.tablePage.currentPage = currentPage
            this.tablePage.pageSize = pageSize
            this.findList()
        },
        async headerClickEvent(param) {
            const type = await VXETable.modal.confirm("是否修改");
            if (type === 'confirm') {
                this.isDefaultId = param;
            }
            else {
                VXETable.modal.message({ content: "已取消", status: "info" });
            }

        },
        changeDefStyle(param) {
            return { 'alert-message-icon': this.isDefaultId == param }
        }

    }
}

</script>
<style scoped>
.alert-message-icon {
    width: 50px;
    text-align: center;
    color: #409eff;
    margin-right: 8px;
}
</style>